<template>
    <div class="content">
        <el-dialog :title="cloneForm.title" :visible.sync="cloneVisible" width="40%" top="5vh" append-to-body class="scrollbar">
            <el-form :model="cloneForm">
                <el-form-item label="来源命名空间" label-width="120px" prop="soucreNs">
                    <el-input v-model="cloneForm.sourceNs" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="数据源数量" label-width="120px" prop="dsNums">
                    <el-input v-model="cloneForm.sourceInfos.length" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="克隆源数据" label-width="120px" prop="sourceInfos">
                    <el-tag v-for="item in cloneForm.sourceInfos" :key="item.ds" :type="item.ds">{{item.ds}} {{item.mns ? ' | ' + item.mns : ''}} {{item.sqlId ? ' | '  + item.sqlId  :''}}</el-tag>
                </el-form-item>
                <el-form-item label="目标命名空间" label-width="120px" prop="targetNs">
                    <el-select v-model="cloneForm.targetNs" placeholder="请目标命名空间">
                        <el-option v-for="(item, index) in nss" :key="index" :label="item" :value="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="相同配置" label-width="120px" prop="cloneType">
                    <el-select v-model="cloneForm.cloneType" placeholder="请选择相同配置处理">
                        <el-option v-for="(item, index) in cloneTypes" :key="index" :label="item.name" :value="item.type"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="数据范围" label-width="120px" prop="dataCloneScope">
                    <el-select v-model="cloneForm.dataCloneScope" placeholder="请选择活动区域">
                        <el-option v-for="(item, index) in dataCloneScopes" :key="index" :label="item.name" :value="item.type"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cloneVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleClone">开始克隆</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import { nsList } from '@/api/ns'
    export default {
        mounted() {
            nsList(this.ns).then((res) => {
                this.nss = res.data;
            })
        },
        data() {
            return {
                nss: [],
                cloneForm: {},
                cloneVisible: false,
                cloneTypes: [{ type: 'TERMINATE_IMPORT', name: '终止导入' }, { type: 'SKIP', name: '跳过' }, { type: 'OVERRIDE', name: '覆盖' }],
                dataCloneScopes: [{ type: 'ALL', name: '全部数据(Mapper、SQL)' }, { type: 'SELF', name: '本身数据' }]
            }
        },
        methods: {
            init(type, cloneForm) {
                this.cloneForm = {}
                this.cloneVisible = true
                this.cloneForm = cloneForm
            },
            /**
             * 查询名称空间列表
             */
            handleClone() {
                dsClone(this.cloneForm).then(res => {
                    this.$message({ message: '克隆成功！', type: 'success' })
                })
                this.cloneVisible = false
            },
            /**
             * 查询名称空间列表
             */
            getNsList() {
                nsList(this.ns).then((res) => {
                    this.nss = res.data;
                })
            }
        }
    }
</script>
<style scoped>
.content {
    margin: 20px 0px;
    font-size: 1em;
}
.el-form-item {
    margin: 20px 0px;
    font-weight: bold;
    text-align: left;
}
.el-select,
.el-input {
    width: 400px;
}
</style>